<template>
  <div class="base64-tool">
    <h2>Base64 编码 / 解码</h2>
    <textarea v-model="inputText" placeholder="请输入文本" rows="5"></textarea>
    <div class="buttons">
      <button @click="encode">编码</button>
      <button @click="decode">解码</button>
    </div>
    <textarea v-model="resultText" placeholder="结果" rows="5" readonly></textarea>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'Base64Tool',
  data() {
    return {
      inputText: '',
      resultText: '',
      errorMessage: '',
    };
  },
  methods: {
    encode() {
      try {
        this.resultText = btoa(this.inputText);
        this.errorMessage = '';
      } catch (err) {
        this.errorMessage = '编码失败，请检查输入内容';
      }
    },
    decode() {
      try {
        this.resultText = atob(this.inputText);
        this.errorMessage = '';
      } catch (err) {
        this.errorMessage = '解码失败，请检查输入内容';
      }
    },
  },
};
</script>

<style scoped>
.base64-tool {
  max-width: 600px;
  margin: 0 auto;
}
textarea {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.3s;
}
textarea:focus {
  border-color: #3498db;
}
.buttons {
  display: flex;
  justify-content: space-between;
}
button {
  flex: 1;
  margin: 5px;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #2980b9;
}
.error {
  color: red;
  margin-top: 10px;
}
</style> 